@()(implicit session: Session)

@config.main("Home") {

    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("my-icon/style.css")">


    <style>

            .panel-default {
                border-color: #ddd;
            }

            .panel-body{
                border: 1px #ddd solid;
            }

            .panel {
                -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
                box-shadow: 0 1px 2px rgba(0,0,0,.05);
            }
            .panel {
                margin-bottom: 20px;
                background-color: #fff;
                border: 1px solid transparent;
                border-top-color: transparent;
                border-right-color: transparent;
                border-bottom-color: transparent;
                border-left-color: transparent;
                border-radius: 4px;
                -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
                box-shadow: 0 1px 1px rgba(0,0,0,.05);
            }

            .panel-title {
                margin-top: 0;
                margin-bottom: 0;
                font-size: 16px;
                color: inherit;
            }

            .panel-default > .panel-heading {
                background-image: -webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);
                background-image: -o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);
                background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));
                background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
                background-repeat: repeat-x;
            }
            .panel-default > .panel-heading {
                color: #333;
                background-color: #f5f5f5;
                border-color: #ddd;
            }


            .panel-heading {
                padding: 10px 15px;
                border: 1px #ddd solid;
                border-bottom: 1px solid transparent;
                border-bottom-color: transparent;
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
            }

            .panel-body {
                padding: 15px;
            }
            .thumbnail {
                //height: 200px;
                height: 144px;
                box-shadow: 0 1px 2px rgba(0,0,0,.075);
                display: block;
                padding: 4px;
                margin-bottom: 20px;
                line-height: 1.42857143;
                background-color: #fff;
                border: 1px solid #ddd;
                border-radius: 0;
                -webkit-transition: border .2s ease-in-out;
                -o-transition: border .2s ease-in-out;
                transition: border .2s ease-in-out;
            }


    </style>

    @if(session.get("lang") == Option("cn")){
        @cnIndex
    }else{
        @enIndex
    }

    <footer>Copyright © Copyright 2021 Auto Parts All Right Reserved </footer>


}

    @enIndex = {
        <div class="body-box">

            <div class="index-box">
                <div class="index-left">

                    <div style="height: 257px;display: flex;flex-direction: column;justify-content: start" class="index-text">

                        <h3>Welcome to Oil-tea Camellia Database!</h3>
                        <p style="font-size: 16px"><i>Camellia oleifera</i>, which originated in China, is notable as an important source of edible oil (known
                        as tea oil or camellia oil) obtained from its seeds. It is commonly known as the oil-seed camellia
                        or tea oil camellia, though to a lesser extent other species of camellia are used in oil production too.</p>

                    <p style="font-size: 16px"> It is widely distributed in China and is cultivated extensively there. It is found in forests, thickets,
                        banks of streams and foothills at elevations of 500 to 1,300 metres.</p>

                    </div>


                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-database"></i>  Resources</h3>
                        </div>
                        <div class="panel-body">

                            <div class="row">

                                @pngBox("Genome","genome.jpg",routes.GenomeController.genomePage("Coleifera"))
                                @pngBox("Phenome","phe.jpg",routes.PhenotypeController.phenotypePage)
                                @pngBox("Markers/\nQTLs","marker.jpg",routes.QtlController.qtlPage)
                                @pngBox("Maps","maps.jpg",routes.HomeController.blankPage("Maps"))
                                @pngBox("Cultivars","cultivars.jpg",routes.FruitController.fruitPage)
                                @pngBox("Tools","tools.jpg",routes.ToolsController.toolPage)


                            </div>

                        </div>
                    </div>




                    @*
                    <form class="form-inline" autocomplete="off" action="/larimichthys/all/searchPage" method="get">
                    <div class="input-group" style="width: 100%">
                    <input type="text" name="input" class="form-control"
                    required placeholder="e.g.ko03021 NAM" id="input" autocomplete="off"/>
                    <span class="input-group-btn">
                    <button class="btn my-btn" type="submit"
                    style="border-top-right-radius: 4px;
                    border-bottom-right-radius: 4px">Search</button>
                    </span>
                    </div>
                    <span   style=" margin-left: 1%;text-align: left">
                    e.g.,&nbsp;<a href="#" onclick="showExample()" class="resLink"><em id="egQuery">
                    example</em></a></span>
                    </form>
                    *@

                </div>

                <div class="index-right" style="
                    height: 100%;
                    padding-left: 20px">
                    <div  style="text-align: center">
                        <img src="@routes.Assets.versioned("../../../public/images/old/phe.jpg")" style="width: 80%;
                            border-radius: 10px;
                            margin-bottom: 10px" />
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-cube"></i> Data Statistics</h3>
                        </div>
                        <div class="panel-body">
                            <ul class="list-unstyled">
                                <li><i class="fa fa-chevron-circle-right"></i> Species: 3</li>
                                <li><i class="fa fa-chevron-circle-right"></i> Genes:  189,829  </li>
                                <li><i class="fa fa-chevron-circle-right"></i> Phenotypes: 1,035</li>
                                <li><i class="fa fa-chevron-circle-right"></i> Markers: 3,745</li>
                                <li><i class="fa fa-chevron-circle-right"></i> Publications: 2,176</li>
                            </ul>
                        </div>
                    </div>



                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-bookmark"></i> Release Notes</h3>
                        </div>
                        <div class="panel-body">
                            <ul class="list-unstyled">
                                <li><i class="fa fa-chevron-circle-right"></i>
                                    Oil-tea Camellia Database is avaliable online on Feb 2023.
                                </li>
                                <li><i class="fa fa-chevron-circle-right"></i>
                                    Genes is publicly accessible since January 2023.
                                </li>
                                <li><i class="fa fa-chevron-circle-right"></i>
                                    Markers is publicly accessible since January 2023.
                                </li>
                            </ul>
                        </div>
                    </div>


                </div>

            </div>




        </div>

    }

    @cnIndex={
        <div class="body-box">

            <div class="index-box">
                <div class="index-left">
                    <div style="height: 257px;display: flex;flex-direction: column;justify-content: start">
                        <h3>Welcome to Oil-tea Camellia Database!</h3>

                        <p style="font-size: 16px">油茶(<i>Camellia oleifera</i>)原产于中国，因其种子中提取的食用油(称为茶油或茶油)的重要来源而闻名。它通常被称为油籽茶花或茶油茶花，尽管在较小程度上其他种类的茶花也用于石油生产。</p>

                    <p style="font-size: 16px">它在中国分布广泛，在那里被广泛种植。它生长在海拔500至1300米的森林、灌木丛、溪边和山麓。</p>

                    </div>


                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-database"></i>  导航</h3>
                        </div>
                        <div class="panel-body">

                            <div class="row">

                                @pngBox("基因组","genome.jpg",routes.GenomeController.genomePage("Coleifera"))
                                @pngBox("表型信息","phe.jpg",routes.PhenotypeController.phenotypePage)
                                @pngBox("Markers/\nQTLs","marker.jpg",routes.QtlController.qtlPage)
                                @pngBox("Maps","maps.jpg",routes.HomeController.blankPage("Maps"))
                                @pngBox("品种信息","cultivars.jpg",routes.FruitController.fruitPage)
                                @pngBox("工具","tools.jpg",routes.ToolsController.toolPage)


                            </div>

                        </div>
                    </div>




                    @*
                    <form class="form-inline" autocomplete="off" action="/larimichthys/all/searchPage" method="get">
                    <div class="input-group" style="width: 100%">
                    <input type="text" name="input" class="form-control"
                    required placeholder="e.g.ko03021 NAM" id="input" autocomplete="off"/>
                    <span class="input-group-btn">
                    <button class="btn my-btn" type="submit"
                    style="border-top-right-radius: 4px;
                    border-bottom-right-radius: 4px">Search</button>
                    </span>
                    </div>
                    <span   style=" margin-left: 1%;text-align: left">
                    e.g.,&nbsp;<a href="#" onclick="showExample()" class="resLink"><em id="egQuery">
                    example</em></a></span>
                    </form>
                    *@

                </div>

                <div class="index-right" style="
                    height: 100%;
                    padding-left: 20px">
                    <div  style="text-align: center">
                        <img src="@routes.Assets.versioned("../../../public/images/old/phe.jpg")" style="width: 80%;
                            border-radius: 10px;
                            margin-bottom: 10px" />
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-cube"></i> 数据统计</h3>
                        </div>
                        <div class="panel-body">
                            <ul class="list-unstyled">
                                <li><i class="fa fa-chevron-circle-right"></i> 物种: 3</li>
                                <li><i class="fa fa-chevron-circle-right"></i> 基因:  189,829  </li>
                                <li><i class="fa fa-chevron-circle-right"></i> 表型: 1,035</li>
                                <li><i class="fa fa-chevron-circle-right"></i> QTL标记: 3,745</li>
                                <li><i class="fa fa-chevron-circle-right"></i> 论文: 2,176</li>
                            </ul>
                        </div>
                    </div>



                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-bookmark"></i> 版本说明</h3>
                        </div>
                        <div class="panel-body">
                            <ul class="list-unstyled">
                                <li><i class="fa fa-chevron-circle-right"></i>
                                    油茶茶花数据库于2023年2月上线。
                                </li>
                                <li><i class="fa fa-chevron-circle-right"></i>
                                    自2023年1月起，基因对公众开放。
                                </li>
                                <li><i class="fa fa-chevron-circle-right"></i>
                                    QTL标记自2023年1月起公开访问。
                                </li>
                            </ul>
                        </div>
                    </div>


                </div>

            </div>




        </div>

    }


@imgBox(title: String, fa: String, href: Call) = {

    <a href="@href" target="_blank" class="nav-box">
        <div class="img-box">
            <div class="img-box2">

                <div class="img">
                    <i class="icon icon-@fa"></i>
                </div>
                <p>@title</p>

            </div>

        </div>
    </a>
}

@pngBox(title: String, img: String, href: Call) = {
    <div class="col-md-4">
        <div class="thumbnail">
            <div class="row" style="height: 100%">
                <div class="col-sm-6">
                    <img src="@routes.Assets.versioned("images/" + img)" style="width: 100px;
                        height: 80px;
                        margin-top: 20px;">

                </div>
                <div class="col-sm-6" style="margin-left: -25px;height:100%;display: flex;align-items: center;flex-direction: column;justify-content: space-between;padding-top: 15px;padding-bottom: 15px">
                    <h3 style="font-size: 25px">@title
                    </h3>
                    <a style=" color: white;width: 85px" href="@href" target="_blank" class="btn my-btn" role="button"><i class="fa fa-hand-o-right"></i>
                        View</a>
                </div>
            </div>
        </div>
    </div>
}